<template>
    <div class="page-wrapper">
        <div class="page-wrapper__body is-list">
            <div class="page-container">
                <div class="grid-container">
                    <el-row :gutter="20" class="grid-table-tool">
                        <el-col :span="6" class="tool-action">
                            <el-input v-model="params.name" placeholder="请输入创建人" @keyup.enter="onSearch">
                            </el-input>
                        </el-col>
                        <el-col :span="6">
                            <el-input v-model="params.contract" placeholder="请输入合同编号" @keyup.enter="onSearch" >
                            </el-input>
                        </el-col>
                        <el-col :span="4">
                            <el-date-picker
                                    v-model="params.exportTime"
                                    type="date"
                                    placeholder="选择日期">
                            </el-date-picker>
                        </el-col>
                        <el-col :span="6">
                            <el-button type="primary" icon="el-icon-search" @click="onSearch">查询</el-button>
                        </el-col>
                    </el-row>
                    <el-table :data="logsList" border class="grid-table" width="100%" v-loading="isLoading">
                        <el-table-column type="index" align="center"> </el-table-column>
                        <el-table-column prop="userName" label="创建人" ></el-table-column>
                        <el-table-column prop="contract" label="合同编号" ></el-table-column>
                        <el-table-column prop="exportNum" label="导出人数" ></el-table-column>
                        <el-table-column prop="exportTime" label="导出时间"  :formatter="dateFormat" >
                        </el-table-column>
                    </el-table>
                    <el-row class="grid-table-tool">
                        <el-col :span="12" class="tool-action">&nbsp;</el-col>
                        <el-col :span="12" class="tool-pagination">
                            <el-pagination
                                    @current-change="handleCurrentChange"
                                    @size-change="handleSizeChange"
                                    @prev-click="handPrevChange"
                                    @next-click="handNextChange"
                                    :current-page="params.page"
                                    :page-size="params.pageSize"
                                    layout="total, prev, pager, next, jumper"
                                    :total="total">
                            </el-pagination>
                        </el-col>
                    </el-row>
                </div>
            </div>
        </div>
    </div>
</template>

<script>

    import {findList} from '../../api/logs'

    import {parseTime} from "../../utils"

    export default {
        name: "log",
        data() {
            return{
                isLoading: false,
                logsList:[],
                params:{
                    name: '',
                    contract: '',
                    exportTime: '',
                    page: 1,
                    pageSize: 50,
                },
                total:0,
            }
        },
        methods: {
            onSearch(){
                this.params.page = 1;
                this.loadData();
            },
            dateFormat(row, column){
                return parseTime(row.exportTime, "yyyy-MM-dd HH:mm:ss");
            },
            handPrevChange(val){
                this.params.page = val-1;
                this.loadData();
            },
            handNextChange(val){
                this.params.page = val+1;
                this.loadData();
            },
            handleCurrentChange(val) {
                this.params.page = val;
                this.loadData();
            },
            handleSizeChange(val){

            },
            async loadData(){
                this.isLoading = true;
                this.params.exportTime = parseTime(this.params.exportTime, "yyyy-MM-dd");
                let resp = await findList(this.params);
                if(!this.qUtil.validResp(resp)){
                    this.$message({type: 'error', message: '数据加载失败!', showClose: true});
                    return false;
                }
                this.logsList = resp.data.dataList;
                this.total = resp.data.total;
                this.isLoading = false;
            },
        },
        mounted(){
            this.loadData();
        }
    }
</script>

<style scoped>

</style>